<template>
  <div>
    <el-form ref="tenantFormRef" v-loading="formLoading" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="企业名称" prop="companyName">
        <el-input v-model="form.companyName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactUserName">
        <el-input v-model="form.contactUserName" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item v-if="!form.id" label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入系统用户名" maxlength="30" />
      </el-form-item>
      <el-form-item v-if="!form.id" label="用户密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入系统用户密码" maxlength="20" />
      </el-form-item>
      <el-form-item label="租户套餐" prop="packageId">
        <el-select v-model="form.packageId" v-loading="packageLoading" :disabled="!!form.tenantId" placeholder="请选择租户套餐" clearable style="width: 100%">
          <el-option v-for="item in packageList" :key="item.packageId" :label="item.packageName" :value="item.packageId" />
        </el-select>
      </el-form-item>
      <el-form-item label="过期时间" prop="expireTime">
        <el-date-picker v-model="form.expireTime" clearable type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择过期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户数量" prop="accountCount">
        <el-input v-model="form.accountCount" placeholder="请输入用户数量" />
      </el-form-item>
      <el-form-item label="绑定域名" prop="domain">
        <el-input v-model="form.domain" placeholder="请输入绑定域名" />
      </el-form-item>
      <el-form-item label="企业地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入企业地址" />
      </el-form-item>
      <el-form-item label="企业代码" prop="licenseNumber">
        <el-input v-model="form.licenseNumber" placeholder="请输入统一社会信用代码" />
      </el-form-item>
      <el-form-item label="企业简介" prop="intro">
        <el-input v-model="form.intro" type="textarea" placeholder="请输入企业简介" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: center; align-items: center;">
      <el-button :loading="buttonLoading" :disabled="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="emit('close')">取 消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getTenant, updateTenant } from '@/api/system/tenant';
import { TenantForm, TenantQuery } from '@/api/system/tenant/types';
import { selectTenantPackage } from '@/api/system/tenantPackage';
import { TenantPkgVO } from '@/api/system/tenantPackage/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const tenantFormRef = ref<ElFormInstance>();

const emit = defineEmits(['close', 'success']);
const props = defineProps({
  id: {
    type: [String, Number],
    default: undefined
  }
});

const initFormData: TenantForm = {
  id: undefined,
  tenantId: undefined,
  contactUserName: '',
  contactPhone: '',
  username: '',
  password: '',
  companyName: '',
  licenseNumber: '',
  domain: '',
  address: '',
  intro: '',
  remark: '',
  packageId: '',
  expireTime: '',
  accountCount: 0,
  status: '0'
};
const data = reactive<PageData<TenantForm, TenantQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantId: '',
    contactUserName: '',
    contactPhone: '',
    companyName: ''
  },
  rules: {
    id: [{ required: true, message: 'id不能为空', trigger: 'blur' }],
    tenantId: [{ required: true, message: '租户编号不能为空', trigger: 'blur' }],
    contactUserName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
    contactPhone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
    companyName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
    username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 修改详情 */
const formLoading = ref(false);
const handleUpdate = async () => {
  formLoading.value = true;
  const res = await getTenant(props.id).finally(() => (formLoading.value = false));
  Object.assign(form.value, res.data);
};

/** 查询所有租户套餐 */
const packageList = ref<TenantPkgVO[]>([]);
const packageLoading = ref(false);
const getTenantPackage = async () => {
  packageLoading.value = true;
  const res = await selectTenantPackage().finally(() => (packageLoading.value = false));
  packageList.value = res.data;
};

/** 提交按钮 */
const buttonLoading = ref(false);
const submitForm = () => {
  tenantFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await updateTenant(form.value).finally(() => (buttonLoading.value = false));
      proxy?.$modal.msgSuccess('操作成功');
      emit('close');
      emit('success');
    }
  });
};

onMounted(() => {
  handleUpdate()
  getTenantPackage();
});

</script>

<style lang="scss" scoped>

</style>